<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气案例-深度监视</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeW">点击切换天气</button>
        <hr>
    </div>
    <script>


        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 1
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            methods: {
                changeW() {
                    this.isHot = !this.isHot
                }
            },

            watch: {
                //正常写法
                /* isHot: {
                    // immediate: true,//初始化时让handler调用一下
                    handler(newValue, oldValue) {
                        console.log('isHot属性的值发生变化了', newValue, oldValue);
                    }
                } */

                // 简写形式，不需要immediate和watch配置项才可以使用
                /* isHot(newValue, oldValue) {
                    console.log('isHot属性的值发生变化了', newValue, oldValue);
                } */
            },

        });
        //正常写法
        /* vm.$watch('isHot', {
            immediate: true,//初始化时让handler调用一下
            deep: true,
            handler(newValue, oldValue) {
                console.log('isHot属性的值发生变化了', newValue, oldValue);
            }
        }) */

        //vm.$watch的简写形式
        //这里千万不能写成箭头函数
        vm.$watch('isHot', function (newValue, oldValue) {
            console.log('isHot属性的值发生变化了', newValue, oldValue);
        })

    </script>
</body>

</html>